<template>
  <section class="box">
    <div class="login-back" @click="back"><i class="iconfont icon-left"></i></div>
    <div class="logo"><img src="../common/images/login-logo.png" alt=""></div>
    <section class="login">
      <label>
        <span class="iconfont icon-user"></span>
        <input class="mobile" type="number" v-model="username" placeholder="请输入手机号">
      </label>
      <label>
        <span class="iconfont icon-password"></span>
        <input class="newPwd" type="password" v-model="password" placeholder="请输入您的密码">
      </label>
      <p>
        <router-link to="/register" tag='a'>快速注册</router-link>
        <router-link to="/forget" tag='a'>忘记密码?</router-link>
      </p>

      <span id="login-btn" @click="login()">登录</span>
    </section>
  </section>
</template>

<script>
  import axios from '../axios/axios'
  import {Toast} from 'mint-ui'

  export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: '',
      }
    },
    mounted: function () {

    },
    methods: {
      login: function () {
        var that = this;
        var data = JSON.stringify({
          "data": [{
            "password": this.password,
            "loginName": this.username
          }],
          "controllerName": "userInfo",
          "actionName": "login"
        });
        axios.postAdmain({
          data: data,
          callback(res) {
            console.log(res.data);
            if (res.data.data.result === true) {
              localStorage.setItem('userToken', res.data.data.token);
              localStorage.setItem('user', JSON.stringify(res.data.data.data));
              that.$router.push('/my');
            } else {
              Toast(res.data.data.data);
            }

          }
        })
      },
      back:function () {
        this.$router.push('/my');
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
    background-image: url('../common/images/login_bg.png');
    background-size: 100% 100%;
    .login-back{
      width: 30px;
      height: 30px;
      border-radius: 100%;
      text-align: center;
      position: absolute;
      top:5px;
      left: 10px;
      z-index: 2;
      padding-top: 2px;
      background: linear-gradient(to right ,#f06a22, #f04022);
      /*background-color: rgba(249, 54, 5, 0.2);*/
      box-sizing: border-box;
      i{
        font-size: 20px;
        color: #FFFFFF;
      }
    }
    .logo{
      width: 100%;
      padding: 20vw 0;
      text-align: center;
      img{
        width: 65%;
        height: auto;
      }
    }
    .login {
      position: absolute;
      top:50vw;
      z-index: 2;
      /*padding-top: 50vw;*/
      label {
        display: block;
        width: 96%;
        border-bottom: 1px solid #ddd;
        margin-top: 20px;
        padding-bottom: 4px;
        padding-left: 4vw;
        span {
          display: inline-block;
          font-size: 20px;
          /*font-weight: 700;*/
        }
        input {
          height: 36px;
          margin-left: 16px;
          background-color: rgba(0, 0, 0, 0);
          color: #313131;
          outline: none;
          font-size: 16px;
        }
      }
      a {
        color: #545454;
        font-size: 14px;
      }
      #login-btn {
        display: block;
        width: 92vw;
        height: 36px;
        margin: 0 4vw;
        background-color: rgba(0, 0, 0, 0.2);
        background: linear-gradient(to right,#f06a22, #f04022);
        border-radius: 5px;
        text-align: center;
        line-height: 36px;
        color: #FFFFFF;
        font-weight: 400;
        font-size: 18px;
        margin-top: 50px;
      }
      p {
        display: flex;
        justify-content: space-between;
        padding: 4vw;
      }
    }
  }
</style>
